<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<style>
    div {
        display: block;
        background-color: black;
        position: absolute;
        font: 17px Tahoma;
        color: #fff;
    }

    span {
        float: left;
        background-color: gray;
        width: 12px;
        height: 12px;
        border: 4px gray outset;
        margin: 0 1 1 0;
        overflow: hidden;
    }

    p {
        float: left;
        width: 8px;
        height: 8px;
        border: 2px gray outset;
        overflow: hidden;
        margin: 0;
        padding: 0
    }

    #main {
        width: 375px;
        height: 430px;
        display: block;
        background-color: gray;
        position: relative;
    }

    #body {
        width: 241px;
        height: 401px;
        left: 15px;
        top: 15px;
        border: 1px solid #999;
    }

    #score {
        width: 80px;
        height: 24px;
        left: 270px;
        top: 15px;
        padding: 4px;
    }

    #level {
        width: 80px;
        height: 24px;
        left: 270px;
        top: 50px;
        padding: 4px;
    }

    #next {
        width: 50px;
        height: 50px;
        left: 270px;
        top: 85px;
        border: 19px black solid;
    }

    #ctrl {
        width: 80px;
        height: 55px;
        left: 270px;
        top: 360px;
        padding: 4px;
        text-align: center;
        background-color: gray
    }

    #ctrl button {
        width: 80px;
        height: 25px;
    }
</style>
<script>
    //By: X!ao_f QQ:120000512
    var G = {
        fs: [],
        fn: [],
        score: 0,
        l: ['#9F0', '#FF3', '#F33', '#C0C', '#33C', '#0F3', '#F93'],
        v: [0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0x801, 0xFFFF],
        d: [[0xCC00], [0x4444, 0xF0], [0x8C40, 0x6C00], [0x4C80, 0xC600], [0x44C0, 0x8E00, 0xC880, 0xE200], [0x88C0, 0xE800, 0xC440, 0x2E00], [0x4E00, 0x8C80, 0xE400, 0x4C40]],
        init: function () {
            var body = document.getElementById('body');
            var next = document.getElementById('next');
            for (var i = 0; i < 240; i++) {
                G.fs.push(body.appendChild(document.createElement("span")));
            }
            for (var i = 0; i < 16; i++) {
                G.fn.push(next.appendChild(document.createElement("p")));
            }
            G.domScore = document.getElementById('score');
            G.domLevel = document.getElementById('level');
            document.onkeydown = function (e) {
                G.event(e || window.event, 0)
            };
            G.rand();
            G.next();
        },
        timeTesk: function () {
            if (G.pause)return;
            if (!G.move(G.x, G.y + 1, G.t)) {
                var s = 0;
                for (var i = 0; i < 19; i++) {
                    G.v[i] = G.v[i] | G.m[i];
                    if (G.v[i] == 0xFFF) {
                        for (var k = i; k > 0; k--) {
                            G.v[k] = G.v[k - 1];
                        }
                        G.score += ++s;
                    }
                }
                G.next();
                return false;
            }
            G.draw();
            return true;
        },
        move: function (x, y, t) {
            var m = [];
            for (var k = 0; k < 4; k++) {
                m[y + k] = (G.d[G.n][t] >> (3 - k) * 4 & 0xF) << Math.max(x, 0) >> -Math.min(x, 0);
                if (m[y + k] & G.v[y + k]) {
                    return false;
                }
            }
            G.x = x;
            G.y = y;
            G.t = t;
            G.m = m;
            G.draw();
            return true;
        },
        rand: function () {
            G.n = G._n;
            G.t = G._t;
            G.c = G._c;
            G._n = parseInt(Math.random() * G.d.length);
            G._t = parseInt(Math.random() * G.d[G._n].length);
            G._c = parseInt(Math.random() * G.l.length);
        },
        next: function () {
            G.rand();
            if (parseInt(G.score / 20) != G.level) {
                G.level = parseInt(G.score / 20);
                clearInterval(G.handle);
                G.handle = setInterval("G.timeTesk()", 500 / (G.level + 1));
            }
            G.domScore.innerHTML = 'Score:' + G.score;
            G.domLevel.innerHTML = 'Level:' + G.level;
            var i = 0;
            while (!(G.d[G.n][G.t] >> i * 4 & 0xF))i++;
            if (!G.move(3, i - 3, G.t)) {
                alert('Game over!');
                clearInterval(G.handle);
            }
        },
        draw: function () {
            for (var i = 0; i < 240; i++) {
                if ((G.v[parseInt(i / 12)] >> (11 - i % 12)) & 0x1) {
                    G.fs[i].style.visibility = '';
                } else if ((G.m[parseInt(i / 12)] >> (11 - i % 12)) & 0x1) {
                    G.fs[i].style.visibility = '';
                    G.fs[i].style.borderColor = G.fs[i].style.background = G.l[G.c];
                } else {
                    G.fs[i].style.visibility = 'hidden';
                }
            }
            for (var i = 0; i < 16; i++) {
                if (G.d[G._n][G._t] >> (15 - i) & 0x1) {
                    G.fn[i].style.visibility = '';
                    G.fn[i].style.borderColor = G.fn[i].style.background = G.l[G._c];
                } else {
                    G.fn[i].style.visibility = 'hidden';
                }
            }
        },
        event: function (e, t) {
            switch (e.keyCode) {
                case 37:
                    G.move(G.x + 1, G.y, G.t);
                    break;
                case 39:
                    G.move(G.x - 1, G.y, G.t);
                    break;
                case 38:
                    G.move(G.x, G.y, (G.t + 1) % G.d[G.n].length);
                    break;
                case 40:
                    G.timeTesk();
                    break;
                case 32:
                    while (G.timeTesk());
            }
        }
    }
</script>
<body onload='G.init();'>
<div id='main'>
    <div id='body'></div>
    <div id='score'></div>
    <div id='level'></div>
    <div id='next'></div>
    <div id='ctrl'>
        <button onclick="javascript:location.href=location.href;">New</button>
        <button onclick="javascript:this.innerHTML={'true':'Start','false':'Pause'}[G.pause=!!!G.pause];">Pause</button>
    </div>
</div>
</body>
</html>